<template>
  <div class="virtual-container">
    <div class="btn-group">
      <el-button type="success" size='small' id="virtual-add" @click="handleEdit('添加')">{{$t('添加')}}</el-button>
      <el-button type="danger" size='small' id="virtual-del" @click="handleDel">{{$t('删除')}}</el-button>
    </div>
    <VirtualTools ref="edit_box" :type_info="type_info" v-bind:edit_form="info" @listData='listData' />
    <el-table size='mini' ref="multipleTable" :data="addr_group_list" tooltip-effect="dark" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="strBridgeName" :label="$t('接口名称')" min-width="80">
      </el-table-column>
      <el-table-column prop="cDevOtherName" :label="$t('接口别名')" min-width="80">
        <template slot-scope="scope">
          <tooltip :html="scope.row.cDevOtherName" :content="scope.row.cDevOtherName" class="wid190" :refName="scope.row.cDevOtherName"></tooltip>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="enPortMode" :label="$t('模式')" min-width="100" :formatter="handel_enPortMode"> -->
      <!-- </el-table-column> -->
      <el-table-column prop="virtual" :label="$t('包含接口')" min-width="200" :formatter="handel_virtual">
      </el-table-column>
      <el-table-column prop="ipv4" :label="$t('IPv4/子网掩码')" align='center' min-width="200">
        <template slot-scope="scope">
          <tooltip :html="classMapShowIPv4(scope.row, ';<br/>')" :content="classMapShowIPv4(scope.row, ',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ipv6" :label="$t('IPv6/前缀')" align='center' min-width="200">
        <template slot-scope="scope">
          <tooltip :html="classMapShowIPv6(scope.row, ';<br/>')" :content="classMapShowIPv6(scope.row, ',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="bLinkStatus" :label="$t('链路状态')" min-width="80" :formatter="bLinkStatus">
      </el-table-column>
      <el-table-column prop="bPortStatus" :label="$t('状态')" min-width="80" :formatter="bPortStatus">
      </el-table-column>
      <el-table-column prop="iMtu" :label="$t('MTU')" min-width="80">
      </el-table-column>
      <el-table-column prop="sys" fixed="right" :label="$t('操作')" width="170">
        <template slot-scope="scope">
          <el-button type="success" plain size="mini" @click="handleEdit('编辑',scope.row)" :class="'config' + scope.$index">
            {{$t('配置')}}
          </el-button>
          <el-button type="primary" plain size="mini" @click="handleEdit('查看',scope.row,)" :class="'check' + scope.$index">
            {{$t('查看')}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="slot">
      <el-button size="mini" @click="handleCurrentChange(1)" :disabled="record.page === 1">{{$t('首页')}}</el-button>
      <el-button size="mini" @click="handleCurrentChange(record.page - 1)" :disabled="record.page === 1">{{$t('上一页')}}</el-button>
      <span style="text-align: center;">{{ record.page }}</span>
      <el-button size="mini" @click="handleCurrentChange(record.page + 1)" :disabled="addr_group_list.length < record.limit">{{$t('下一页')}}</el-button>
    </el-pagination>
  </div>
</template>

<script>
import VirtualTools from './components/VirtualTools'
import { getVirtualApiArray, getVirtualApiInfo,del_virtual_api } from '@/api/network/api/virtual'
export default {
  name: 'Virtual',
  components: {
    VirtualTools
  },
  data () {
    return {
      type_info:'',
      addr_group_list: [],
      info: {},
      tableData: [],
      editVisible: false,
      multipleSelection: [],
      record: {
        page: 1,
        limit: 20
      },
      total: 0
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.record.limit = val
      this.listData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.record.page = val
      this.listData()
    },
    listData () {
      getVirtualApiArray(this.record).then(res => {
        this.addr_group_list = res.info
      })
    },
    change (data) {
      this.editVisible = data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handel_ipv4_array (row) {
      if (row.ipv4) {
        let test = ''
        row.ipv4.forEach((item, index, array) => {
          if (item.cPortIpv4 !== '') {
            test += item.cPortIpv4 + '/'
          }
          if (item.cPortNetmask !== '') {
            test += item.cPortNetmask
          }
        })
        return test
      }
    },
    handel_ipv6_array (row) {
      if (row.ipv6) {
        let test = ''
        row.ipv6.forEach((item, index, array) => {
          if (item.cPortIpv6 !== '') {
            test += item.cPortIpv6 + '/'
          }
          if (item.cDevIpv6Prefix !== '') {
            test += item.cDevIpv6Prefix
          }
        })
        return test
      }
    },
    classMapShowIPv4 (data, str) {
      let reStr = ''
      if (data.ipv4) {
        data.ipv4.forEach((item, index) => {
          if (item.cPortIpv4 && index === (data.ipv4.length - 1) && str === ',') {
            reStr += item.cPortIpv4 + '/' + item.cPortNetmask
          } else if (item.cPortIpv4) {
            reStr += item.cPortIpv4 + '/' + item.cPortNetmask + str
          }
        })
      }
      return reStr
    },
    classMapShowIPv6 (data, str) {
      let reStr = ''
      if (data.ipv6) {
        data.ipv6.forEach((item, index) => {
          if (item.cPortIpv6 && index === (data.ipv6.length - 1) && str === ',') {
            reStr += item.cPortIpv6 + '/' + item.cDevIpv6Prefix
          } else if (item.cPortIpv6) {
            reStr += item.cPortIpv6 + '/' + item.cDevIpv6Prefix + str
          }
        })
      }
      return reStr
    },
    bPortStatus (row) {
      switch (row.bPortStatus) {
        case 'up':
          return this.$t('开启')
        case 'down':
          return this.$t('关闭')
      }
    },
    handel_enPortMode (row) {
      switch (row.enPortMode) {
        case 0:
          return this.$t('路由模式')
        case 1:
          return this.$t('透明模式')
      }
    },
    bLinkStatus (row) {
      switch (row.bLinkStatus) {
        case 0:
          return 'down'
        case 1:
          return 'up'
      }
    },
    handel_virtual (row) {
      let str = ''
      if (row.ContainPort) {
        row.ContainPort.forEach((item, index) => {
          if (index === 0) {
            str += item.strPhysicsName
          } else {
            str += ',' + item.strPhysicsName
          }
        })
      }
      return str
    },
    // 删除
    handleDel() {
      if (this.multipleSelection.length) {
        this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
          closeOnClickModal: false,
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          confirmButtonClass: 'confirmButton',
          cancelButtonClass: 'confirmCancelButton',
          type: 'warning'
        }).then(() => {
          console.log('this.multipleSelection',this.multipleSelection)
          const iVlanId = this.multipleSelection.map(item=>item.iVlanId).join('@#@');
          const params = {
            iVlanId
          }
          del_virtual_api(params).then(res => {
            if (res.status === 0) {
              this.$messages.success(this.$t('删除成功'))
              this.listData()
            }
          })
        })
      } else {
        this.$messages.error(this.$t('请至少选择一条数据进行删除'))
      }
    },
    handleEdit (type_info,row) {
      this.type_info = type_info;
      if(type_info === '添加') {
        this.$refs.edit_box.form = {}
        return this.$refs.edit_box.edit_info();
      }
      getVirtualApiInfo({ name: row.strBridgeName }).then(response => {
        if (response.status === 0) {
          this.tableData = []
          const info = response.info[0];
          for(let i = info.ipv4.length - 1; i >= 0;i--) {
            if(!info.ipv4[i].cPortIpv4) {
              info.ipv4.splice(i,1)
            }
          }
           for(let i = info.ipv6.length - 1; i >= 0;i--) {
            console.log(info.ipv6[i].cDevIpv6Prefix)
            if(!info.ipv6[i].cDevIpv6Prefix) {
              info.ipv6.splice(i,1)
            }
          }
          info.ContainPort = info.ContainPort && info.ContainPort.map(item=>item.strPhysicsName) || []
          this.info = info
          if (typeof this.info.iAllowed === 'object') {
            let text = ''
            // 修改Trunk VlanId的值用，从1，2，3格式改成1-3
            let newNum = 0 // 如果有连续数字则等于连续数的开始
            let oldNum = 0 // 连续数的末尾
            let flag = false // 进入连续数的标识
            this.info.iAllowed.forEach((item, index) => {
              if (index === 0) { // 初始值
                newNum = item.AllowedVlanId
                text += item.AllowedVlanId
              } else {
                if (flag) {
                  // 进入连续数
                  if (item.AllowedVlanId === (oldNum + 1)) {
                    oldNum = item.AllowedVlanId
                  } else {
                    text += oldNum
                    text += ',' + item.AllowedVlanId
                    newNum = item.AllowedVlanId
                    oldNum = 0
                    flag = false
                  }
                } else {
                  // 未进入连续数
                  if (item.AllowedVlanId === (newNum + 1)) {
                    flag = true
                    oldNum = item.AllowedVlanId
                    text += '-'
                  } else {
                    newNum = item.AllowedVlanId
                    text += ',' + item.AllowedVlanId
                  }
                }
              }
            })
            if (flag) {
              text += oldNum
            }
            this.info.iAllowedStr = text
          }
          this.$refs.edit_box.edit_info()
        }
      })
    }
  }
}
</script>

<style scoped></style>
